<template>
    <el-collapse class="silder-design" v-model="activeName">
        <el-collapse-item title="纸张组件" name="paper">
            <draggable tag="div" class="silder-dom"
                :list="paperComponents"
                :group="{ name: 'paper', pull: 'clone', put: false, ghostClass: 'ghost' }"
                :sort="false"
                @start="handleMoveStart"
                @end="handleMoveEnd"
                :move="handleMove">
                <div class="silder-draggable" v-for="(item, index) in paperComponents" :key="index">
                    <span class="silder-button">
                        <i :class="item.icon"></i>
                        <span>{{ item.label }}</span>
                    </span>
                </div>
            </draggable>
        </el-collapse-item>
        <el-collapse-item title="布局组件" name="layout">
            <draggable tag="div" class="silder-dom"
                :list="layoutComponents"
                :group="{ name: 'componentItem', pull: 'clone', put: false, ghostClass: 'ghost' }"
                :sort="false"
                @start="handleMoveStart"
                @end="handleMoveEnd"
                :move="handleMove">
                <div class="silder-draggable" v-for="(item, index) in layoutComponents" :key="index">
                    <span class="silder-button">
                        <i :class="item.icon"></i>
                        <span>{{ item.label }}</span>
                    </span>
                </div>
            </draggable>
        </el-collapse-item>
        <el-collapse-item title="基础组件" name="base">
            <draggable tag="div" class="silder-dom"
                :list="baseComponents"
                :group="{ name: 'componentItem', pull: 'clone', put: false, ghostClass: 'ghost' }"
                :sort="false"
                @start="handleMoveStart"
                @end="handleMoveEnd"
                :move="handleMove">
                <div class="silder-draggable" v-for="(item, index) in baseComponents" :key="index">
                    <span class="silder-button">
                        <i :class="item.icon"></i>
                        <span>{{ item.label }}</span>
                    </span>
                </div>
            </draggable>
        </el-collapse-item>
    </el-collapse>
</template>

<script>
import draggable from 'vuedraggable';
import { paperComponents, layoutComponents, baseComponents } from "./config/component";
export default {
    name: "SilderDesign",
    components: {
        draggable
    },
    data() {
        return {
            activeName: ['paper', 'layout', 'base'],
            paperComponents,
            layoutComponents,
            baseComponents
        }
    },
    methods: {
        handleMoveStart(e) { // 开始拖拽
        },
        handleMoveEnd(e) { // 结束拖拽
        },
        handleMove(e, originalEvent) { // 自定义控制那些元素可以拖拽或不允许拖拽
            return true;
        }
    }
}
</script>

<style>
    @import url('./SilderDesign.css');
</style>